<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.init();
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">资讯</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-form
        label-width="auto"
        :inline="true"
        :model="_$.query.requestParam"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="资讯标题">
          <el-input v-model="_$.query.requestParam.condition" clearable />
        </el-form-item>
        <el-form-item label="资讯类型">
          <el-select
            v-model="_$.query.requestParam.typeId"
            size="small"
            style="width: 120px"
            clearable
          >
            <el-option
              v-for="item in _$.newsTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-space wrap>
            <el-button @click="$.onReset">重置</el-button>
            <el-button type="primary" @click="$.onSearch">查询</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>

    <el-space direction="vertical" fill wrap class="w-fill" :size="20">
      <el-card
        v-for="item in _$.query.responseParam.records"
        :key="'recipe-card' + item.id"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <div style="display: flex; justify-content: space-between">
              <el-button link type="primary" @click="to.goToDetail(item.id)">
                {{ item.title }}
              </el-button>
              <span
                ><el-text type="info" size="small">资讯分类</el-text
                ><el-tag size="small" style="margin-left: 10px">{{
                  item.typeName
                }}</el-tag></span
              >
            </div>
          </div>
        </template>
        <el-text
          class="ellipsis-multiline"
          type="info"
          v-html="item.subject"
        ></el-text>
      </el-card>
    </el-space>
  </el-space>
</template>

<style scoped></style>
